<template>
  <el-dialog v-model="visible" title="检入文件设置" width="500">
    <div class="content">
      <div class="info">💬 符合要求的文件将会被检入到云端</div>
      <div>
        <div
          style="
            font-weight: 500px;
            font-size: 14px;
            margin-bottom: 5px;
            color: rgba(20, 20, 20, 1);
          "
        >
          检入文件后缀名
        </div>
        <el-input
          v-model="textarea"
          style="width: 450px"
          size="small"
          autosize
          type="textarea"
          maxlength="100"
          show-word-limit
          placeholder="格式为*.【格式后缀】，加“；”分割，不输入则检入全部文件"
        />
      </div>
    </div>
    <template #footer>
      <div class="footer">
        <el-checkbox
          v-model="check"
          label="同名文件替换"
          style="margin-right: auto"
          size="small"
        />
        <el-button size="small" @click.stop="handleCancel">取消</el-button>
        <el-button size="small" type="primary" @click="handleSure">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
  import { ref, defineExpose } from "vue";

  const visible = ref(false);
  const check = ref(false);
  const textarea = ref("");

  defineExpose({
    visible,
    check,
    textarea,
  });
  defineProps([""]);

  /**
   * @description 处理取消
   */
  const handleCancel = () => {
    visible.value = false;
  };

  /**
   * @description 处理确定
   */
  const handleSure = () => {
    visible.value = false;
  };
</script>

<style scoped lang="scss">
  .content {
    width: 100%;
    .info {
      width: 100%;
      background-color: rgba(26, 161, 251, 0.1);
      font-size: 13px;
      margin: -10px -5px 5px -5px;
    }
  }
  .footer {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
</style>
